<template>
  <div>
    <PayBookTitle :queryGoods="queryGoods" :showTip="true" @childByValue="childByValue"/>


    <div class="layout">
      <ul class="shop-ul" style="overflow: hidden;">
        <BookItem v-for="(item,index) in bookList" :key="index" :book-info="item"></BookItem>
      </ul>
      <div class="block">

        <el-pagination
            align="center"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="queryGoods.pageNum"
            :page-size="queryGoods.pageSize"
            :page-sizes="[10,15,20]"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <!--    <BookItem :bookList="bookList"/>-->

  </div>
</template>

<script>
import BookItem from "@/router/pages/PayBookList/BookItem";
import PayBookTitle from "@/components/PayBookTitle";
export default {
  name: "PayBook",
  data() {
    return {
      bookList: [],
      currentPage: 1,
      total: 0,
      pageSize: 0,
      queryGoods: {
        keyword: null,
        cateId: null,
        subId: null,
        pageNum: 1,
        pageSize: 10,
        sort: null,  //
        order: 0,
      }
    }
  },

  components: {
    PayBookTitle,
    BookItem
  },
  methods: {
    handleSizeChange(val) {
      this.queryGoods.pageSize = val * 1
      this.$router.push({path: '/paybook', query: this.queryGoods})
    },
    handleCurrentChange(val) {
      this.queryGoods.pageNum = val;
      this.$router.push({path: '/paybook', query: this.queryGoods})
    },
    childByValue(newQuery) {
      const source = this.queryGoods
      this.queryGoods = {...source, ...newQuery}
      this.$router.push({path: '/paybook', query: this.queryGoods})

    },
    getList() {
      this.queryGoods.pageSize *= 1
      this.queryGoods.pageNum *= 1
      this.getRequest('/p/pms/book/customList', this.queryGoods).then((resp) => {
        this.bookList = resp.data.list
        this.total = resp.data.total
        this.queryGoods.pageSize = resp.data.pageSize
        this.queryGoods.pageNum = resp.data.pageNum
      })
    }
  },
  watch: {
    '$route'() {
      this.getList()
    }
  },
  created() {
    this.queryGoods = {...this.queryGoods, ...this.$route.query}
    this.getList();
  }
}

</script>

<style scoped>

/*分页标题*/
.s-tui-jian {
  height: 40px;
  background: #f0f0f0;
  margin: 43px 0;
  overflow: hidden;
  line-height: 40px;
  font-family: "宋体";
}

.layout {
  width: 1152px;
  margin: 0 auto;
  height: 850px;
  /*border: solid;*/
}

.clearfix {
  display: block;
}

.tui-fl {
  overflow: hidden;
}

.fleft, .uleft li {
  float: left;
  display: inline;
}

.tui-fl ul li {
  float: left;
}

.tui-fl ul li a {
  border-left: 1px solid #e1e0e0;
  padding: 0 30px 0 8px;
}

.fright {
  float: right;
  display: inline;
}

.s-tui-jian {
  height: 40px;
  background: #f0f0f0;
  margin: 43px 0;
  overflow: hidden;
  line-height: 40px;
  font-family: "宋体";
}


</style>